<template>
  <div class="page-container">
    <!-- 1. 新增：左上角回退按钮 -->
    <div class="back-btn" @click="$router.push('/safety')">
      <i class="fa-solid fa-circle-arrow-left"></i>
    </div>

    <div class="security-card security-card-div">
      <div>
        <h1>修 改 登 录 密 码</h1>
      </div>

      <el-card class="security-card" shadow="hover">
        <!-- 步骤条 -->
        <div class="step-header">
          <div :class="['step-item', step >= 1 ? 'active' : '']">1. 验证密码</div>
          <div :class="['step-item', step >= 2 ? 'active' : '']">2. 设置新密码</div>
          <div :class="['step-item', step >= 3 ? 'active' : '']">3. 密码修改完成</div>
        </div>

        <!-- 第一步：验证密码 -->
        <div v-if="step === 1" class="step-content">
          <el-form :model="form" ref="passwordForm" label-width="120px">
            <InputField class="input-diy" type="password" v-model="form.currentPassword" label="请输入当前密码"/>
            <div class="btn-group">
              <el-button type="primary" size="medium" @click="validatePassword">下一步</el-button>
            </div>
          </el-form>
        </div>

        <!-- 第二步：设置账户 -->
        <div v-if="step === 2" class="step-content">
          <el-form :model="form" ref="passwordForm" label-width="120px">
            <InputField class="input-diy" type="password" v-model="form.newPassword" label="请输入新密码"/>
            <InputField class="input-diy" type="password" v-model="form.confirmPassword" label="确认新密码"/>
            <div class="tip-text">密码必须是英文和数字组成，长度 6~20 个字符，且两次输入必须一致</div>
            <div class="btn-group">
              <el-button type="primary" size="medium" @click="savePassword">保存</el-button>
            </div>
          </el-form>
        </div>

        <!-- 第3步：成功提示 -->
        <div v-if="step === 3" class="step-content success-content">
          <i class="fa-solid fa-circle-check success-icon"></i>
          <div class="success-text">账号修改成功！</div>
          <div class="btn-group">
            <el-button type="primary" size="medium" @click="$router.push('/safety')">返回安全中心</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { updatePassword, verifyPassword } from '@/api/user'
import InputField from '@/views/component/InputField.vue'
import { getPublicKey } from '@/api/commonApi'
import RsaUtil from '@/utils/rsa-util'

export default {
  components: { InputField },
  created() {
    getPublicKey().then(res => {
      this.publicKey = res
    })
  },
  data() {
    return {
      step: 1,
      publicKey: '',
      form: {
        currentPassword: '',
        newPassword: '',
        confirmPassword: '' // 新增确认密码字段
      }
    }
  },
  methods: {
    async validatePassword() {
      if (!this.form.currentPassword) {
        this.$notify.error({ title: '验证失败', message: '请输入当前密码' })
        return
      }
      const rsa = new RsaUtil(this.publicKey)
      const res = await verifyPassword({ password: rsa.encrypt(this.form.currentPassword) })
      if (res) {
        this.step = 2
      } else {
        this.$notify.error({ title: '验证失败', message: '密码错误' })
      }
    },
    async savePassword() {
      const { newPassword, confirmPassword } = this.form

      if (!newPassword) {
        this.$notify.error({ title: '验证失败', message: '请输入新密码' })
        return
      }

      // 校验两次输入是否一致
      if (newPassword !== confirmPassword) {
        this.$notify.error({ title: '验证失败', message: '两次输入密码不一致' })
        return
      }

      const pattern = /^[a-zA-Z0-9!@#$%^&*()_\-+=\[{\]};:'",.<>/?\\|]{6,20}$/
      if (!pattern.test(newPassword)) {
        this.$notify.error({ title: '验证失败', message: '密码格式错误，仅支持6-20位数字、英文字符以及常见英文标点！' })
        return
      }

      const rsa = new RsaUtil(this.publicKey)

      // 校验通过，发送请求
      const res = await updatePassword({ password: rsa.encrypt(newPassword) })
      if (res) {
        this.step = 3
        this.$notify.success({ title: '修改成功', message: '账户修改成功' })
      }
    }

  }
}
</script>

<style scoped>
.page-container {
  position: relative; /* 新增：使内部绝对定位元素相对于这个容器 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: calc(100vh - 100px);
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.security-card {
  width: 100%;
  max-width: 960px;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.security-card-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: none;
}

.step-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}

.step-item {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-radius: 12px;
  background-color: #f5f5f5;
  color: #666;
  font-weight: 500;
  position: relative;
}

.step-item.active {
  background-color: #0084ff;
  color: #fff;
}

.step-item.active::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #0084ff;
}

.step-content {
  margin-top: 16px;
}

.btn-group {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

.tip-text {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
  padding-left: 23px;
}

.input-diy {
  margin: 10px 0;
}

.back-btn {
  position: absolute; /* 相对于 page-container */
  top: 16px; /* 调整距离顶部 */
  left: 16px; /* 调整距离左侧 */
  cursor: pointer;
  color: #0084ff;
  transition: color 0.3s;
}

.back-btn i {
  font-size: 24px;
}

.back-btn:hover {
  color: #0066cc;
}

.success-content {
  text-align: center;
}

.success-icon {
  font-size: 60px;
  color: #00b578;
  margin-bottom: 16px;
}

.success-text {
  font-size: 20px;
  font-weight: 500;
}
</style>
